<template>
	<view class="order">
		<view class="order_top">
			<img src="https://v-shop.shuzp.top/v2/assets/img/icon_status_1.a231969c.png" alt="">
			<text class="order_span">待发货</text>
			<text class="order_p" style="color: #969799;">订单跟踪</text>
			<u-icon name="arrow-right" class="order_r" style="color: #969799;"></u-icon>
		</view>
		<view class="order_box1">
			<u-icon name="map" class="box1_r"></u-icon>
			<text class="shouhuo">收货人: <span>22222</span></text>
			<text class="box1_number">19812651651</text>
			<text class="box1_dizhi" style="color:#999999">收货地址：<span >1561616515151651651561</span></text>
		</view>
		<view class="order_box2">
			<text class="box2_p1" style="color: #969799;">物流信息</text>
			<text class="box2_p2">无</text>
		</view>


		<view class="set_b">
			<view class="liebiao">
				<u-icon name="home-fill" class="liebiao_s"></u-icon>
				商品列表
			</view>
			<text class="set_b1 ">
				<img src="https://dcdn.it120.cc/2022/02/04/b5017470-29bb-43a3-b34c-56cdf6b0fb05.png" alt=""
					width="120rpx" class="left">
				<text class="right">
					<view class="xuni">
						虚拟商品(购买时无需填写收货地址，无需物流)
					</view>
					<view class="ling">
						￥0.01
					</view>
				</text>
				<text class="set_num">×2</text>
				<text class="set_xiaoji">商品小计<span>￥118.00</span></text>
			</text>

		</view>
		<view class="order_box2">
			<text class="box2_p1" style="color: #969799;">买家留言</text>
			<text class="box2_p2">无</text>
		</view>

		<view class="order_box3">
			<view class="box3_h1">
				<text class="box2_p1"style="color: #969799;">商品金额</text>
				<text class="box2_p2">￥118.00</text>
			</view>
			<view class="box3_h2">
				<text class="box2_p1" style="color: #969799;">运费</text>
				<text class="box2_p2">无</text>
			</view>
			<view class="box3_h2">
				<text class="box2_p3">实付款：<span>￥118.00</span></text>
			</view>
		</view>

		<view class="order_box4">
			<text style="color: #969799;">订单编号：<span style="color: #323233;">51651651655252</span></text>
			<text style="color: #969799;">下单时间：<span style="color: #323233;">51651651655252</span></text>
			<text style="color: #969799;">支付方式：<span style="color: #323233;">在线支付</span></text>
			<text style="color: #969799;">付款方式：<span style="color: #323233;">钱包余额</span></text>
			<text style="color: #969799;">配送方式：<span style="color: #323233;">普通快递</span></text>
		</view>

		<view class="order_box5">
			<button @click="contact">

				联系客服</button>
			<u-icon name="server-fill" class="box4_r"></u-icon>
		</view>
		<u-toast ref="uToast" style="z-index: 1000" />
	</view>
</template>

<script>
	export default{
		data() {
			return{
				
			}
		},
		methods:{
			contact(){
				this.$refs.uToast.show({
					message: '未开放：客服',
					type: 'default',
					duration:1000
					// url: '/pages/user/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 100%;
		height: 100%;
		background-color: #F7F8FA;

		.order_box5 {
			height: 100rpx;
			width: 100%;
			margin-top: 25rpx;
			background-color: white;
			position: relative;


			button {
				height: 60rpx;
				width: 200rpx;
				font-size: 30rpx;
				line-height: 60rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				background-color: white;
				border-radius: 50rpx;
				border: 1px solid #ccc;
			}
			.box4_r{
				position: absolute;
				top: 35rpx;
				right:180rpx;
			}
		}

		.order_top {
			height: 110rpx;
			width: 100%;
			background-color: white;
			position: relative;
			border-bottom: 1px solid #F7F8F9;

			img {
				height: 80rpx;
				width: 80rpx;
				margin-top: 12rpx;
				margin-left: 20rpx;
				float: left;
			}

			.order_span {
				margin-top: 23rpx;
				margin-left: 20rpx;
				float: left;
			}

			.order_p {
				float: right;
				margin-top: 23rpx;
				margin-right: 60rpx;
			}

			.order_r {
				position: absolute;
				top: 30rpx;
				right: 10rpx;
			}
		}
	}

	.set_b {
		background-color: white;
		margin-top: 30rpx;
		position: relative;

		.set_num {
			font-size: 26rpx;
			color: #969799;
			position: absolute;
			top: 226rpx;
			right: 39rpx;

		}

		.set_xiaoji {
			font-size: 30rpx;
			position: absolute;
			top: 310rpx;
			left: 468rpx;

			span {
				color: #38A784;
			}
		}
	}

	.liebiao {
		width: 100%;
		/* background-color: aqua; */
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #F7F8F9;
		font-size: 30rpx;
		// margin-left: 70rpx;
		padding-left: 50rpx;
		font-weight: 600;
		position: relative;

		.liebiao_s {
			position: absolute;
			top: 25rpx;
			left: 15rpx;
		}
	}

	.set_b1 {
		width: 100%;
		height: 380rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		position: relative;

		img {
			height: 190rpx;
			width: 190rpx;
			margin-top: 25rpx;
			margin-left: 25rpx;

		}

	}

	.xuni {
		height: 40rpx;
		width: 500rpx;
		font-size: 27rpx;
		margin-left: 240rpx;
		margin-top: 32rpx;
	}

	.left {
		/* width: 20%; */
		height: 250rpx;
		float: left;

	}

	.right {
		width: 80%;
		height: 250rpx;
	}

	.ling {
		font-size: 35rpx;
		position: absolute;
		top: 222rpx;
		left: 224rpx;
		color: #38A784;

	}

	.order_box1 {
		height: 110rpx;
		width: 100%;
		background-color: white;
		position: relative;
		border: 1px solid #F7F8F9;

		.box1_r {
			position: absolute;
			top: 15rpx;
			left: 20rpx;
		}

		.shouhuo {
			height: 20rpx;
			width: 200rpx;
			font-size: 27rpx;
			font-weight: 600;
			position: absolute;
			top: 12rpx;
			left: 60rpx;
		}

		.box1_number {
			height: 32rpx;
			width: 120rpx;
			position: absolute;
			top: 10rpx;
			right: 100rpx;
			font-size: 27rpx;
			font-weight: 600;
		}

		.box1_dizhi {
			height: 32rpx;
			width: 650rpx;
			font-size: 25rpx;
			position: absolute;
			top: 60rpx;
			left: 50rpx;
		}
	}

	.order_box2 {
		height: 88rpx;
		width: 100%;
		background-color: white;
		position: relative;

		.box2_p1 {

			font-size: 26rpx;
			position: absolute;
			top: 30rpx;
			left: 20rpx;
		}

		.box2_p2 {
			font-size: 26rpx;
			position: absolute;
			top: 30rpx;
			right: 20rpx;
		}
	}

	.order_box2 {
		margin-top: 20rpx;
	}

	.order_box3 {
		height: 260rpx;
		width: 100%;
		margin-top: 25rpx;

		.box3_h1,
		.box3_h2 {
			height: 88rpx;
			width: 100%;
			background-color: white;
			position: relative;

			.box2_p1 {

				font-size: 26rpx;
				position: absolute;
				top: 30rpx;
				left: 20rpx;
			}

			.box2_p2 {
				font-size: 26rpx;
				position: absolute;
				top: 30rpx;
				right: 20rpx;
			}

			.box2_p3 {
				font-size: 30rpx;
				position: absolute;
				top: 30rpx;
				right: 20rpx;

				span {
					font-size: 35rpx;
					color: #38A784;
				}
			}
		}
	}

	.order_box4 {
		height: 280rpx;
		width: 100%;
		background-color: white;
		margin-top: 25rpx;
		display: flex;
		flex-direction: column;
		font-size: 25rpx;
		padding-left: 20rpx;
		padding-top: 10rpx;
		color: #ccc;

		text {
			flex: 1;
			color: black;
		}
	}
</style>